<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
  <TITLE>Diff, Match and Patch: Demo of Patch</TITLE>
  <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"
    SRC="../javascript/diff_match_patch.js"></SCRIPT>
</HEAD>

<BODY>
<H1>Diff, Match and Patch</H1>

<H2>Demo of Patch</H2>

<P>Two texts can be diffed against each other, generating a list of patches.
  These patches can then be applied against a third text. If the third text has
  edits of its own, this version of patch
  will apply its changes on a best-effort basis, reporting which patches
  succeeded and which failed.</P>

<P>In this scenario Shakespeare wrote Hamlet in old English, the source
  document. Then two derivative
  works were created. One is Hamlet updated to modern English. The other is a
  Star Trek parody in old English.
  This demonstrantion creates a list of patches between the source and the
  modern English version. Then it
  applies those patches onto the Star Trek parody, thus creating a Star Trek
  parody in
  modern English.</P>

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
  var dmp = new diff_match_patch();

  var patch_text = '';

  function diff_launch() {
    var text1 = document.getElementById('text1a').value;
    var text2 = document.getElementById('text2a').value;

    var ms_start = (new Date).getTime();
    var diff = dmp.diff_main(text1, text2, true);
    var ms_end = (new Date).getTime();

    if (diff.length > 2) {
      dmp.diff_cleanupSemantic(diff);
    }

    var patch_list = dmp.patch_make(text1, text2, diff);
    patch_text = dmp.patch_toText(patch_list);

    document.getElementById('diffdatediv').innerHTML =
      'Time: ' + (ms_end - ms_start) / 1000 + 's';
    document.getElementById('diffoutputdiv').innerHTML =
      '<FIELDSET><LEGEND>Patch:</' + 'LEGEND><PRE>' + patch_text +
        '</' + 'PRE></' + 'FIELDSET>';
    //document.getElementById('diffoutputdiv').innerHTML = dmp.diff_prettyHtml(diff);
    document.getElementById('patchbutton').disabled = false;
  }


  function patch_launch() {
    var text1 = document.getElementById('text1b').value;
    var patches = dmp.patch_fromText(patch_text);

    var ms_start = (new Date).getTime();
    var results = dmp.patch_apply(patches, text1);
    var ms_end = (new Date).getTime();

    document.getElementById('patchdatediv').innerHTML =
      'Time: ' + (ms_end - ms_start) / 1000 + 's';
    document.getElementById('text2b').value = results[0];
    results = results[1];
    var html = '';
    for (var x = 0; x < results.length; x++) {
      if (results[x]) {
        html += '<LI><FONT COLOR="#009900">Ok</' + 'FONT>';
      } else {
        html += '<LI><FONT COLOR="#990000">Fail</' + 'FONT>';
      }
    }
    document.getElementById('passfaildiv').innerHTML = html;
  }
</SCRIPT>

<FORM action="#" onsubmit="return false">
  <H3>Shakespeare's copy:</H3>
  <TABLE WIDTH="100%">
    <TR>
      <TD WIDTH="50%">Old Version:<BR><TEXTAREA ID="text1a" STYLE="width: 100%"
        ROWS=10>Hamlet: Do you see yonder cloud that's almost in shape of a
        camel?
        Polonius: By the mass, and 'tis like a camel, indeed.
        Hamlet: Methinks it is like a weasel.
        Polonius: It is backed like a weasel.
        Hamlet: Or like a whale?
        Polonius: Very like a whale.
        -- Shakespeare</TEXTAREA></TD>
      <TD WIDTH="50%">New Version:<BR><TEXTAREA ID="text2a" STYLE="width: 100%"
        ROWS=10>Hamlet: Do you see the cloud over there that's almost the shape
        of a camel?
        Polonius: By golly, it is like a camel, indeed.
        Hamlet: I think it looks like a weasel.
        Polonius: It is shaped like a weasel.
        Hamlet: Or like a whale?
        Polonius: It's totally like a whale.
        -- Shakespeare</TEXTAREA></TD>
    </TR>
  </TABLE>
  <P><INPUT TYPE="button" onClick="diff_launch()" VALUE="Compute Patch"></P>
  <BLOCKQUOTE>
    <DIV ID="diffoutputdiv"></DIV>
  </BLOCKQUOTE>

  <DIV ID="diffdatediv"></DIV>

  <H3>Trekkie's copy:</H3>
  <TABLE WIDTH="100%">
    <TR>
      <TD WIDTH="50%">Old Version:<BR><TEXTAREA ID="text1b" STYLE="width: 100%"
        ROWS=10>Kirk: Do you see yonder cloud that's almost in shape of a
        Klingon?
        Spock: By the mass, and 'tis like a Klingon, indeed.
        Kirk: Methinks it is like a Vulcan.
        Spock: It is backed like a Vulcan.
        Kirk: Or like a Romulan?
        Spock: Very like a Romulan.
        -- Trekkie</TEXTAREA></TD>
      <TD WIDTH="50%">New Version:<BR><TEXTAREA READONLY ID="text2b"
        STYLE="width: 100%" ROWS=10></TEXTAREA></TD>
    </TR>
  </TABLE>
  <INPUT TYPE="button" ID="patchbutton" onClick="patch_launch()"
    VALUE="Apply Patch" DISABLED>
</FORM>

<OL ID="passfaildiv"></OL>
<DIV ID="patchdatediv"></DIV>

<HR>
Back to <A HREF="http://code.google.com/p/google-diff-match-patch/">Diff, Match
  and Patch</A>

</BODY>
</HTML>

